<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-wrap: wrap;
        }
        body{
            background-color: rgb(214, 147, 199);
            width: 1000px;
            height: 850px;
        }
        #gg{
        text-decoration: none;
        width: 1659px;
        height: 40px;
        margin-top: -9px;
        margin-left:-8px ;
        background-image: url(img/9.jfif);
        background-size: 1650px 25px;
    }
    #gg a{
        width: 200px;
        height: 30px;
        color: rgb(26, 25, 26);
        font-size: 25px;
        text-decoration: none;
        margin-left: 1px;
    }
    #gg button{
        background-image: url(img/9.jfif);
        background-size: cover;
    }
        #box
        {
            width: 600px;
            height: 420px;
            border: solid 7px white;
            margin-left: 820px;
            padding-right: 200px; 
            margin-top: 20px;   

        }
    #one
    {
        width: 750px;
        height: 200px;
        border:solid 2px white;
        margin-top: 10px;
        position: relative;
        margin-left: 25px;
    }
    #two
    {
        width: 750px;
        height: 180px;
        border:solid 2px white;
        margin-top: 10px;
        position: relative;
        margin-left: 25px;
        display: none;
    }
    h1{
        padding: 30px;
    
        width: 200px;
        height: 3px;
        position: relative;
        margin-top: -25px;
    }
    #pp{
        width: 70px;
        height: 25px;
        position: relative;
        float: right;
        margin-top: -35px;
        margin-right: 40px;
    }
    #three{
        width: 700px;
        height: 175px;
    
        margin-left: 25px;
        margin-top: -5px;
      
    }
    .same
    {
        width: 100px;
        height: 100px;
        
        float: left;
        margin-left: 15px;
        margin-top: 10px;
    }
    img{
        width: 100px;
        height: 80px;
        border: solid 1px;


    }

    span{
        width: 100px;
        height: 30px;
        font-size: 20px;
    
        color: black;
        margin-bottom: -80px;
        float: none;
        margin-left: 30px;
    }
   .same a{
        font-size: 20px;
        text-decoration: none;
        color: black;
        
    }
    #hahaha{
        width: 750px;
        height: 600px;
        border: double 15px white;
        position: relative;
        margin-top: -200px;
        margin-left: 30px;
        background-repeat: no-repeat;
        background-size: 750px 600px;

    
        
    }
    #sen{
        position: absolute;
        width: 350px;
        height: 50px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 80px;
        margin-top: -420px;
        margin-left: 200px;
    
    }
   
    #cs{
        box-sizing: border-box;
        width: 770px;
        height: 160px;
        position: relative;
        margin-top: 30px;
        margin-left: 50px;
        background-image: url(img/8.jfif);
        background-repeat: no-repeat;
        background-size: 120px 160px;
        padding-left: 100px;
        line-height: 50px;
        padding-top: 55px;
        background-position: bottom right;
        border: solid 2px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 50px;
    }
  #js{
    display: none;
  }
    </style>
</head>
<body>
    <div id="gg"><button><a href="js.7.23.html" >下一页</a></button></div>
    <div id="box">
        <div id="one">
            <h1>我的导航</h1>
            <button id="pp" onclick="tianjia()">添加</button><hr>
        </div>
        <div id="two">
            <h1>可选快捷方式</h1>
            <div id="three">
                <div  class="same"  id="1div" onclick="ban(1)"><img src="img/5.jpg" alt="" ><span><a href="https://www.doubao.com/chat/?channel=microsoft&source=microsoft_db_14&type=daoh&theme=wangzjh">科技</a></span></div>
                <div class="same" id="2div" onclick="ban(2)"><img src="img/6.jpg" alt=""><span><a href="https://news.qq.com/">新闻</a></span></div>
                <div class="same" id="3div"onclick="ban(3)"><img src="img/7.jpg" alt=""><span><a href="https://v.ifeng.com/">军事</a></span></div>
                <div class="same" id="4div" onclick="ban(4)"><img src="img/1.jfif" alt=""><span><a href="https://weibo.com/newlogin?url=https%3A%2F%2Fweibo.com%2F">娱乐</a></span></div>

            </div>
        </div>
        <div id="cs">选择完毕~~~</div>
    </div>
    <h1 id="sen">我的风景 </h1>
    <div id="hahaha"></div>
</body>
<script>
    function tianjia()
    {
        document.getElementById("two").style.display="block"
    }
     function ban(i)
     {
        let div1=document.getElementById("one")
        let div2=document.getElementById("two")
        let divn=document.getElementById(i+"div");
        div1.appendChild(divn)
       if(div2.childNodes.length==5)
       {
        document.getElementById("two").style.display="none"
       
       }
        
     }
     

      let arr=["img/6.jpg","img/2.jfif","img/3.jfif","img/4.jfif"];
         let i=0;
         function pt()
         {
            //document.getElementById("hahaha").innerHTML='<img src="'+arr[i]+ '">';
           document.getElementById("hahaha").style.backgroundImage='url(" '+arr[i]+' ")';
            i++;
            if(i>3)
            {
                i=0;
            }
            setTimeout(pt,3000);
         }
         pt()
        
        
    
</script>
</html>